// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化时间显示
    updateTime();
    setInterval(updateTime, 1000);
    
    // 初始化导航切换
    initNavigation();
    
    // 初始化控制按钮事件
    initControlButtons();
    
    // 初始化AI功能
    initAIFeatures();
    
    // 模拟设备数据更新
    setInterval(updateDeviceData, 5000);
    
    // 初始化WebRTC连接
    initWebRTC();
    
    // 添加科幻音效
    initSoundEffects();
    
    // 初始化粒子效果
    initParticles();
});

// 更新时间显示
function updateTime() {
    const now = new Date();
    const timeString = now.toTimeString().split(' ')[0];
    document.getElementById('currentTime').textContent = `[${timeString}]`;
}

// 初始化导航切换
function initNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    const tabContents = document.querySelectorAll('.tab-content');
    
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            // 移除所有激活状态
            navItems.forEach(nav => nav.classList.remove('active'));
            tabContents.forEach(content => content.classList.remove('active'));
            
            // 激活当前选项
            this.classList.add('active');
            const tabId = this.getAttribute('data-tab');
            document.getElementById(`${tabId}-content`).classList.add('active');
            
            // 添加切换音效
            playSound('switch');
        });
    });
}

// 初始化控制按钮事件
function initControlButtons() {
    const controlButtons = document.querySelectorAll('.control-btn');
    controlButtons.forEach(button => {
        // 特殊处理对讲广播按钮
        if (button.id === 'intercomBtn') {
            // 添加按下事件
            button.addEventListener('mousedown', function() {
                startIntercom();
            });
            
            // 添加松开事件
            button.addEventListener('mouseup', function() {
                stopIntercom();
            });
            
            // 添加鼠标离开按钮时也停止对讲
            button.addEventListener('mouseleave', function() {
                if (isIntercomActive) {
                    stopIntercom();
                }
            });
            
            // 添加触摸事件支持
            button.addEventListener('touchstart', function(e) {
                e.preventDefault();
                startIntercom();
            });
            
            button.addEventListener('touchend', function(e) {
                e.preventDefault();
                stopIntercom();
            });
        } else {
            // 其他按钮保持原有的点击事件
            button.addEventListener('click', function() {
                const action = this.getAttribute('data-action');
                handleControlAction(action);
            });
        }
    });
}

// 对讲广播相关变量
let isIntercomActive = false;
let intercomStartTime = 0;

// 开始对讲
function startIntercom() {
    const button = document.getElementById('intercomBtn');
    isIntercomActive = true;
    intercomStartTime = Date.now();
    
    // 更新按钮状态
    button.textContent = '松开结束';
    button.style.backgroundColor = 'rgba(0, 200, 200, 0.9)';
    button.style.color = '#000';
    button.style.borderColor = '#00ffcc';
    button.style.boxShadow = '0 0 15px rgba(0, 255, 204, 0.8)';
    
    // 播放开始对讲音效
    playSound('intercomStart');
    
    console.log('开始对讲广播');
    showNotification('开始对讲广播');
}

// 停止对讲
function stopIntercom() {
    if (!isIntercomActive) return;
    
    const button = document.getElementById('intercomBtn');
    isIntercomActive = false;
    const duration = Date.now() - intercomStartTime;
    
    // 恢复按钮状态
    button.textContent = '按住说话';
    button.style.backgroundColor = '';
    button.style.color = '';
    button.style.borderColor = '';
    button.style.boxShadow = '';
    
    // 播放结束对讲音效
    playSound('intercomStop');
    
    // 发送对讲数据（模拟）
    console.log(`结束对讲广播，时长: ${duration}ms`);
    showNotification(`对讲广播已发送，时长: ${(duration/1000).toFixed(1)}秒`);
    
    // 这里应该连接到实际的对讲API
    // 模拟API调用
    setTimeout(() => {
        showNotification('对讲消息已送达');
    }, 1000);
}

// 处理控制动作
function handleControlAction(action) {
    // 这里应该连接到实际的设备控制API
    console.log(`执行控制动作: ${action}`);
    
    // 显示反馈
    const originalText = event.target.textContent;
    event.target.textContent = '>EXECUTING<';
    event.target.disabled = true;
    
    // 添加点击音效
    playSound('click');
    
    // 模拟API调用延迟
    setTimeout(() => {
        event.target.textContent = originalText;
        event.target.disabled = false;
        
        // 显示执行结果
        showNotification(`"${action}" COMMAND SENT`);
    }, 1000);
}

// 初始化AI功能
function initAIFeatures() {
    // 语音控制按钮
    document.getElementById('voiceControl').addEventListener('click', function() {
        const statusElement = document.getElementById('voiceStatus');
        statusElement.textContent = 'LISTENING...';
        playSound('voice');
        
        // 模拟语音识别过程
        setTimeout(() => {
            statusElement.textContent = 'RECOGNIZED';
            showNotification('VOICE COMMAND RECOGNIZED');
            playSound('success');
            
            // 3秒后恢复默认状态
            setTimeout(() => {
                statusElement.textContent = 'STANDBY';
            }, 3000);
        }, 2000);
    });
    
    // AI图片处理按钮
    document.getElementById('aiImageProcess').addEventListener('click', function() {
        const resultElement = document.getElementById('imageResult');
        resultElement.textContent = 'PROCESSING...';
        playSound('process');
        
        // 模拟图片识别过程
        setTimeout(() => {
            resultElement.textContent = 'HELMET DETECTED';
            showNotification('AI IMAGE PROCESSING COMPLETE');
            playSound('success');
        }, 3000);
    });
    
    // 聊天发送按钮
    document.getElementById('sendChat').addEventListener('click', sendChatMessage);
    document.getElementById('chatInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendChatMessage();
        }
    });
}

// 发送聊天消息
function sendChatMessage() {
    const input = document.getElementById('chatInput');
    const message = input.value.trim();
    
    if (message) {
        // 添加用户消息到聊天历史
        addMessageToChat('user', `USER: ${message}`);
        input.value = '';
        playSound('message');
        
        // 模拟AI回复
        setTimeout(() => {
            addMessageToChat('ai', `AI: RECEIVED "${message}", PROCESSING...`);
            playSound('response');
            
            // 模拟处理完成
            setTimeout(() => {
                addMessageToChat('ai', `AI: RECOMMEND CHECKING CONNECTION FOR "${message}"`);
                playSound('response');
            }, 2000);
        }, 1000);
    }
}

// 添加消息到聊天历史
function addMessageToChat(type, message) {
    const chatHistory = document.getElementById('chatHistory');
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', type);
    messageElement.textContent = message;
    chatHistory.appendChild(messageElement);
    chatHistory.scrollTop = chatHistory.scrollHeight;
}

// 模拟设备数据更新
function updateDeviceData() {
    // 模拟电池电量缓慢下降
    const batteryElement = document.getElementById('batteryLevel');
    const currentBattery = parseInt(batteryElement.textContent);
    if (currentBattery > 5) {
        batteryElement.textContent = (currentBattery - 1) + '%';
    }
    
    // 模拟更新报警数量
    const alarmElement = document.getElementById('alarmCount');
    const currentAlarms = parseInt(alarmElement.textContent);
    if (Math.random() > 0.8) {
        alarmElement.textContent = currentAlarms + 1;
        showNotification('NEW ALERT RECEIVED');
        playSound('alert');
    }
    
    // 模拟更新体征数据
    document.getElementById('heartRate').textContent = (70 + Math.floor(Math.random() * 10)) + ' BPM';
    document.getElementById('bodyTemp').textContent = (36.0 + Math.random() * 1.5).toFixed(1) + ' °C';
    
    // 模拟更新气体数据
    document.getElementById('carbonMonoxide').textContent = (0.1 + Math.random() * 0.5).toFixed(1) + ' PPM';
    document.getElementById('methane').textContent = (0.5 + Math.random() * 1.0).toFixed(1) + ' PPM';
}

// 初始化WebRTC连接 - 使用ZLMRTCClient.js
function initWebRTC() {
    // 移动所有变量和函数声明到函数顶部，确保正确的作用域
    const videoElement = document.getElementById('videoStream');
    const statusElement = document.getElementById('connectionStatus');
    let endpoint = null;
    let retryCount = 0;
    const maxRetries = 3;
    
    // 先定义所有需要的函数，然后再使用
    function handleConnectionError(error) {
        console.error('WebRTC连接错误:', error);
        
        // 检查是否为证书错误
        if (error.message && error.message.includes('ERR_CERT') || 
            error.message && error.message.includes('证书')) {
            // 显示证书错误的特定提示
            statusElement.textContent = 'CERT_ERROR';
            statusElement.style.color = '#ff6666';
            console.log('SSL证书错误，这可能是因为自签名证书或证书名称不匹配');
            showNotification('SSL证书错误: 可能是自签名证书或证书名称不匹配');
            showNotification('请先在浏览器中单独访问该地址并信任证书，然后刷新页面重试');
            
            // 在控制台显示详细的证书错误解决指南
            console.log('=== 证书错误解决指南 ===');
            console.log('1. 在新标签页中打开: https://srtc.runde.pro:21443');
            console.log('2. 浏览器会显示安全警告，点击"高级"或"继续前往"');
            console.log('3. 确认信任该证书');
            console.log('4. 返回此页面并刷新');
            
            // 不重试证书错误，直接切换到模拟模式
            setTimeout(() => {
                console.log('SSL证书错误，切换到模拟模式');
                startSimulatedVideo();
            }, 3000);
        } else {
            // 更新状态
            statusElement.textContent = 'STANDBY';
            statusElement.style.color = '#ffff00';
            
            // 尝试重试
            if (retryCount < maxRetries) {
                retryCount++;
                console.log(`RETRYING CONNECTION... (${retryCount}/${maxRetries})`);
                
                // 延迟重试
                setTimeout(() => {
                    createConnection();
                }, 2000);
            } else {
                // 重试次数已达上限，切换到模拟模式
                console.log('MAX RETRIES REACHED, SWITCHING TO SIMULATION MODE');
                startSimulatedVideo();
            }
        }
    }
    
    function handleDisconnection() {
        console.log('WebRTC连接已断开');
        handleConnectionError(new Error('连接已断开'));
    }
    
    function createConnection() {
        try {
            // 检查ZLMRTCClient库是否正确加载
            // 由于这是浏览器环境，我们需要检查正确的全局对象
            if (typeof window.ZLMRTCClient === 'undefined') {
                console.error('ZLMRTCClient库未正确加载');
                handleConnectionError(new Error('ZLMRTCClient库未正确加载'));
                return;
            }
            
            // 根据官方示例，使用ZLMRTCClient命名空间
            const ZLMRTCClient = window.ZLMRTCClient;
            
            if (!ZLMRTCClient.Endpoint) {
                console.error('无法获取Endpoint对象');
                handleConnectionError(new Error('无法获取Endpoint对象'));
                return;
            }
            
            // 尝试连接到流媒体服务器 - 使用官方示例中的URL格式
            const url = 'https://srtc.runde.pro:21443/index/api/webrtc?app=live&stream=36147_82013&type=play';
            
            // 创建Endpoint实例 - 根据官方示例的参数格式
            endpoint = new ZLMRTCClient.Endpoint({
                element: videoElement,  // video 标签
                debug: true,           // 是否打印日志
                zlmsdpUrl: url,        // 流地址
                simulcast: false,      // 是否使用simulcast
                useCamera: false,      // 是否使用摄像头
                audioEnable: true,     // 是否启用音频
                videoEnable: true,     // 是否启用视频
                recvOnly: true,        // 是否只接收流
                resolution: {w: 640, h: 360}, // 分辨率
                usedatachannel: false  // 是否使用数据通道
            });
            
            // 注册事件监听器 - 按照官方示例
            endpoint.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function(e) {
                // ICE 协商出错
                console.log('ICE 协商出错:', e);
                handleConnectionError(new Error('ICE协商出错'));
            });
            
            endpoint.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function(s) {
                // 获取到了远端流，可以播放
                console.log('播放成功', s);
                
                // 更新连接状态
                statusElement.textContent = 'ONLINE';
                statusElement.style.color = '#00ff00';
                
                console.log('VIDEO STREAM CONNECTED');
            });
            
            endpoint.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function(e) {
                // offer anwser 交换失败
                console.log('offer anwser 交换失败', e);
                handleConnectionError(new Error('offer/answer交换失败'));
            });
            
            endpoint.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function(state) {
                // RTC 状态变化
                console.log('当前状态==>', state);
                if (state === 'disconnected' || state === 'failed') {
                    handleDisconnection();
                }
            });
            
        } catch (error) {
            handleConnectionError(error);
        }
    }
    
    // 设置初始状态
    statusElement.textContent = 'CONNECTING...';
    
    try {
        // 开始连接
        createConnection();
        
    } catch (error) {
        console.error('初始化WebRTC失败:', error);
        // 确保handleConnectionError已经定义
        if (typeof handleConnectionError === 'function') {
            handleConnectionError(error);
        } else {
            // 如果handleConnectionError未定义，则直接显示错误
            console.error('handleConnectionError未定义:', error);
            statusElement.textContent = 'ERROR';
            statusElement.style.color = '#ff0000';
        }
    }
}

// 创建全局的模拟视频流函数，避免重复定义
function startSimulatedVideo() {
    const videoElement = document.getElementById('videoStream');
    const statusElement = document.getElementById('connectionStatus');
    
    // 创建噪点效果作为模拟视频
    const canvas = document.createElement('canvas');
    canvas.width = 640;
    canvas.height = 360;
    const ctx = canvas.getContext('2d');
    
    // 更新连接状态
    statusElement.textContent = 'SIMULATION MODE';
    statusElement.style.color = '#ff9900';
    
    // 噪点动画
    function createNoise() {
        const imageData = ctx.createImageData(canvas.width, canvas.height);
        const data = imageData.data;
        
        for (let i = 0; i < data.length; i += 4) {
            const noise = Math.floor(Math.random() * 255);
            data[i] = noise;      // 红
            data[i+1] = noise;    // 绿
            data[i+2] = noise;    // 蓝
            data[i+3] = 255;      // 不透明
        }
        
        ctx.putImageData(imageData, 0, 0);
        
        // 将canvas作为视频源
        videoElement.srcObject = canvas.captureStream();
        
        // 继续动画
        requestAnimationFrame(createNoise);
    }
    
    // 开始噪点动画
    createNoise();
}

// 模拟视频流（仅用于演示）
function simulateVideoStream() {
    const videoElement = document.getElementById('video-bg');
    
    // 在实际应用中，这里会被真实的WebRTC流替换
    // 目前只是设置一个占位符样式
    videoElement.style.backgroundColor = '#0a1a1a';
    
    // 添加一些模拟的噪点效果
    const canvas = document.createElement('canvas');
    canvas.className = 'noise-overlay';
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    videoElement.appendChild(canvas);
    
    // 创建噪声动画
    const ctx = canvas.getContext('2d');
    function drawNoise() {
    // 确保画布尺寸有效
    const width = Math.max(canvas.width || 0, 1);
    const height = Math.max(canvas.height || 0, 1);
    const imageData = ctx.createImageData(width, height);
    const data = imageData.data;
        
        for (let i = 0; i < data.length; i += 4) {
            const noise = Math.floor(Math.random() * 10);
            data[i] = noise;     // R
            data[i + 1] = noise; // G
            data[i + 2] = noise; // B
            data[i + 3] = Math.floor(Math.random() * 5); // A
        }
        
        ctx.putImageData(imageData, 0, 0);
        requestAnimationFrame(drawNoise);
    }
    
    drawNoise();
}

// 显示通知
function showNotification(message) {
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = `> ${message} <`;
    
    // 添加到页面
    document.body.appendChild(notification);
    
    // 3秒后移除通知
    setTimeout(() => {
        if (notification.parentNode) {
            notification.classList.add('fade-out');
            
            // 等待淡出动画完成
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 500);
        }
    }, 3000);
}

// 初始化音效
function initSoundEffects() {
    // 在实际应用中，这里会加载真实的音效文件
    console.log('Sound effects initialized');
}

// 播放音效
function playSound(type) {
    // 在实际应用中，这里会播放真实的音效
    console.log(`Playing sound: ${type}`);
    
    // 添加对讲广播音效
    switch(type) {
        case 'intercomStart':
            console.log('播放对讲开始音效');
            break;
        case 'intercomStop':
            console.log('播放对讲结束音效');
            break;
    }
}

// 页面可见性变化时处理
document.addEventListener('visibilitychange', function() {
    if (!document.hidden) {
        // 页面重新可见时刷新时间
        updateTime();
    }
});

// 初始化粒子效果
function initParticles() {
    const particlesContainer = document.createElement('div');
    particlesContainer.className = 'particles';
    document.body.appendChild(particlesContainer);
    
    // 创建粒子
    for (let i = 0; i < 80; i++) {
        createParticle(particlesContainer);
    }
}

// 创建单个粒子
function createParticle(container) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    
    // 随机大小
    const size = Math.random() * 4 + 1;
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    
    // 随机位置
    particle.style.left = `${Math.random() * 100}%`;
    particle.style.top = `${Math.random() * 100}%`;
    
    // 随机透明度
    particle.style.opacity = Math.random() * 0.6 + 0.1;
    
    // 随机动画
    const animationDuration = Math.random() * 15 + 8;
    particle.style.animation = `float ${animationDuration}s linear infinite`;
    
    // 设置动画延迟，使粒子运动更加自然
    particle.style.animationDelay = `${Math.random() * 5}s`;
    
    // 添加浮动动画样式
    let style = document.querySelector('#particle-animation');
    if (!style) {
        style = document.createElement('style');
        style.id = 'particle-animation';
        style.textContent = `
            @keyframes float {
                0% {
                    transform: translate(0, 0) rotate(0deg);
                    opacity: 0.1;
                }
                25% {
                    transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px) rotate(90deg);
                    opacity: 0.4;
                }
                50% {
                    transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px) rotate(180deg);
                    opacity: 0.6;
                }
                75% {
                    transform: translate(${Math.random() * 40 - 20}px, ${Math.random() * 40 - 20}px) rotate(270deg);
                    opacity: 0.4;
                }
                100% {
                    transform: translate(0, 0) rotate(360deg);
                    opacity: 0.1;
                }
            }
        `;
        document.head.appendChild(style);
    }
    
    container.appendChild(particle);
    
    // 随机时间后重新创建粒子
    setTimeout(() => {
        if (particle.parentNode) {
            particle.style.opacity = 0;
            particle.style.transition = 'opacity 1s ease-out';
            
            // 淡出动画完成后移除
            setTimeout(() => {
                if (particle.parentNode) {
                    particle.parentNode.removeChild(particle);
                    createParticle(container);
                }
            }, 1000);
        }
    }, animationDuration * 1000);
}